<style>
    body {
        background-color: #ffffff;
    }

    .xm-select-size {
        width: 200px;
        float: left;
    }
</style>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">剧场标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="剧场标题不能为空" placeholder="请输入剧场标题"
                   value="{$edit.title}"
                   class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">售价</label>
        <div class="layui-input-block">
            <input type="text" name="money" lay-verify="required" lay-reqtext="售价金额不能为空" placeholder="请输入售价金额"
                   value="{$edit.money}"
                   class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">限购</label>
        <div class="layui-input-block">
            <input type="text" name="person" lay-verify="required" lay-reqtext="请输入限购" placeholder="请输入限购 0不限制"
                   value="{$edit.person}"
                   class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">选择剧场</label>
        <div class="layui-input-block">
            <div id="venue" class="xm-select-size"></div>
            <div id="theatre_cate" class="xm-select-size"></div>
            <div id="seat" class="xm-select-size"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">演出时间</label>
        <div class="layui-input-inline">
            <input type="text" name="start_time" lay-verify="required" lay-reqtext="选择演出时间" placeholder="请输入演出时间"
                   value="{$edit.start_time}" class="layui-input" id="start_time" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">演出结束时间</label>
        <div class="layui-input-inline">
            <input type="text" name="end_time" lay-verify="required" lay-reqtext="选择演出结束时间" placeholder="请输入演出结束时间"
                   value="{$edit.end_time}" class="layui-input" id="end_time" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">选择演员</label>
        <div class="layui-input-block">
            <div id="performer"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">上传图片</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="btn_upload">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="upload_image" src="/{$edit.thumb}">
                    <p id="upload_content">
                        <input type="hidden" name="thumb" value="{$edit.thumb}">
                    </p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_press">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">服务说明</label>
        <div class="layui-input-block">
            <textarea name="service_desc" class="layui-textarea" placeholder="请输入服务说明">{$edit.service_desc}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">演出介绍</label>
        <div class="layui-input-block">
            <textarea name="mark" class="layui-textarea" placeholder="请输入演出简介">{$edit.mark}</textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">购票须知</label>
        <div class="layui-input-block">
            <textarea name="description" class="layui-textarea" placeholder="请输入购票须知">{$edit.description}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">取票方式</label>
        <div class="layui-input-block">
            <textarea name="ticket_type" class="layui-textarea" placeholder="请输入取票方式"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" value="{$edit.id}">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/extends/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/extends/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/static/extends/'
    }).extend({
        xmSelect: 'xmSelect/xm-select'
    });
    layui.use(['form', 'xmSelect', "upload", "element", 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            xmSelect = layui.xmSelect,
            upload = layui.upload,
            element = layui.element,
            laydate = layui.laydate;

        laydate.render({
            elem: '#start_time',
            type: 'datetime'
        })
        laydate.render({
            elem: '#end_time',
            type: 'datetime'
        })
        let uploadInst = upload.render({
            elem: '#btn_upload'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_image').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#upload_content').html('<input type="hidden" name="thumb" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#upload_content');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('upload_press', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let uploadInstThumb = upload.render({
            elem: '#btn_thumb'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img_thumb').attr('src', result); //图片链接（base64）
                });

                element.progress('press_thumb', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#text_thumb').html('<input type="hidden" name="thumb_img" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#text_thumb');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInstThumb.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('press_thumb', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let venue = xmSelect.render({
            el: '#venue',
            filterable: true,
            searchTips: '请选择剧院',
            tips: '请选择剧院',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'venue',
            on: function (res) {
                let data = res.change[0];
                hadmin.http("{:url('theatreCate/getTheatreCateByList')}", {
                    venueId: data.value
                }).then(res => {
                    if (res.code == 1) {
                        theatre_cate.update({
                            data: res.data
                        })
                    }
                })
            }
        });
        let theatre_cate = xmSelect.render({
            el: '#theatre_cate',
            filterable: true,
            searchTips: '请选择剧场',
            tips: '请选择剧场',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'theatre_cate_id',
            on: function (res) {
                let data = res.change[0];
                hadmin.http("{:url('seat/getSeatByList')}", {
                    cate_id: data.value
                }).then(res => {
                    seat.update({
                        data: res.data
                    })
                })

            }
        });
        let seat = xmSelect.render({
            el: '#seat',
            filterable: true,
            searchTips: '请选择厅位',
            tips: '请选择厅位',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'seat_id',

        });
        let performer = xmSelect.render({
            el: '#performer',
            filterable: true,
            searchTips: '请选择演员',
            data: [],
            paging: true,
            pageSize: 10,
            name: 'performer',
            initValue: [
                {$edit.performer}
            ],
            model: {
                label: {
                    block: {
                        template: function (item, sels) {
                            return '<img src="/' + item.head + '" style="width: 24px;height: 24px;border-radius: 100%;"/>' + item.name;
                        },
                    },
                }
            },
            template({item, sels, name, value}) {
                return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">' + value + '</span>'
            },
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            hadmin.http("{:url('save')}", data.field).then(res => {
                if (res.code == "{$result.normal}") {
                    hadmin.father_reload();
                }
            })

            return false;
        });
        //剧场
        hadmin.http("{:url('theatreCate/getTheatreCateByList')}", {
            venueId: {$edit.venue}
        }).then(res => {
            if (res.code == 1) {
                theatre_cate.update({
                    data: res.data,
                    initValue: [
                        {$edit.theatre_cate_id}
                    ]
                })
            }
        })
        //剧院
        hadmin.http("{:url('venue/getVenueByList')}").then(res => {
            venue.update({
                data: res.data,
                initValue: [{$edit.venue}]
            })
        })
        ///场次
        hadmin.http("{:url('seat/getSeatByList')}", {
            cate_id: {$edit.theatre_cate_id}
        }).then(res => {
            seat.update({
                data: res.data,
                initValue: [{$edit.seat_id}]
            })
        })
        hadmin.http("{:url('performer/getPerformerByList')}").then(res => {
            if (res.code == "{$result.normal}") {
                performer.update({
                    data: res.data
                })
            }
        })
    });
</script>
</body>
</html>